import * as THREE from 'three';
// 导入 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { gsap } from 'gsap';
import * as dat from 'dat.gui'
import waterVertex from '../shader/water/vertex.glsl'
import waterFragment from '../shader/water/fragment.glsl'

/**
 *  目标：实现水烟雾云效果
 */



// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 7, 7)
scene.add(camera);

const floorParams = {
    waresFrequency:20.0,
    scale:0.09,
    xzScale:0.26,
    noiseFrequency:4.17,
    noiseScale:1.46,
    lowColor:'#ff0000',
    hightColor:'#ffff00',
}
// 创建着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: waterVertex,
    fragmentShader: waterFragment,
    uniforms: {
        uWaresFrequency:{value:floorParams.waresFrequency},
        uScale:{value:floorParams.scale},
        uXzScale:{value:floorParams.xzScale},
        uNoiseFrequency:{value:floorParams.noiseFrequency},
        uNoiseScale:{value:floorParams.noiseScale},
        uLowColor:{value: new THREE.Color(floorParams.lowColor)},
        uHightColor:{value: new THREE.Color(floorParams.hightColor)},
        uTime:{value:0},
    },
    side: THREE.DoubleSide,
    transparent:true,
})

// 添加gui控制器
const gui = new dat.GUI();
gui.add(floorParams, 'waresFrequency').min(0.0).max(30.0).step(0.01).name("波浪").onChange((v)=>{
    shaderMaterial.uniforms.uWaresFrequency.value = v;
})
gui.add(floorParams, 'scale').min(0.0).max(2.0).step(0.01).name("scale").onChange((v)=>{
    shaderMaterial.uniforms.uScale.value = v;
})
gui.add(floorParams, 'xzScale').min(0.0).max(5.0).step(0.01).name("xzScale").onChange((v)=>{
    shaderMaterial.uniforms.uXzScale.value = v;
})
gui.add(floorParams, 'noiseFrequency').min(0.0).max(30.0).step(0.01).name("noiseFrequency").onChange((v)=>{
    shaderMaterial.uniforms.uNoiseFrequency.value = v;
})
gui.add(floorParams, 'noiseScale').min(0.0).max(8.0).step(0.01).name("noiseScale").onChange((v)=>{
    shaderMaterial.uniforms.uNoiseScale.value = v;
})

gui.addColor(floorParams, 'lowColor').name("lowColor").onFinishChange((v)=>{
    shaderMaterial.uniforms.uLowColor.value = new THREE.Color(v);
});
gui.addColor(floorParams, 'hightColor').name("hightColor").onFinishChange((v)=>{
    shaderMaterial.uniforms.uHightColor.value = new THREE.Color(v);
});

const plane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2,1024,1024),
    shaderMaterial
)
plane.rotation.x = -Math.PI / 2
scene.add(plane)

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);



// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);


// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
// renderer.render(scene,camera)

// 创建轨道控制器 (相机,用于渲染的dom)
const controls = new OrbitControls(camera, renderer.domElement);

renderer.shadowMap.enabled = true;


// 开启阻尼
controls.enableDamping = true;

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);

// 设置 clock
const clock = new THREE.Clock();


/**
 * 渲染函数
 * L = V*T   距离 = 速度 * 时间
 */
function render() {
    controls.update()
    renderer.render(scene, camera)
    shaderMaterial.uniforms.uTime.value += clock.getDelta();
    // 浏览器自带的 请求动画帧的方法 ，这里设置 没一帧都调用一下 render 函数
    requestAnimationFrame(render)
}
render();

// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 重新设置相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新设置相机的裁剪面(投影矩阵)
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
}
